<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

    <link rel="shortcut icon" th:href="@{~/UI/favicon.ico}" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{~/UI/css/font.css}">
    <link rel="stylesheet" th:href="@{~/UI/css/xadmin.css}">
    <script type="text/javascript" th:src="@{~/UI/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{~/UI/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{~/UI/js/xadmin.js}"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body class="form-wrap" >

  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-header">修改密码</div>
      <div class="layui-card-body" style="padding: 15px;">

        <div class="layui-form">

          <div class="layui-form-item">
            <label class="layui-form-label">原密码</label>
            <div class="layui-input-inline">
              <input id="oldUpasswordIf" value="1" hidden>
              <input id="uid" th:value="${session.userEntity.uid}" hidden>
              <input id="uname" th:value="${session.userEntity.uname}" hidden>
              <input id="upassword" th:value="${session.userEntity.upassword}" hidden>
              <input id="utipe" th:value="${session.userEntity.utipe}" hidden>
              <input type="password" name="oldUpassword" id="oldUpassword" lay-verify="pass" placeholder="请输入原密码" autocomplete="off" class="layui-input" onblur="oldUpasswordReally()">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-inline">
              <input id="newUpasswordIf" value="1" hidden>
              <input type="password" name="newUpassword" id="newUpassword" lay-verify="pass" placeholder="请输入新密码" autocomplete="off" class="layui-input" readonly="readonly" onblur="passwordSame1()">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
              <input id="reNewUpasswordIf" value="1" hidden>
              <input type="password" name="reNewUpassword" id="reNewUpassword" lay-verify="pass" placeholder="请确认新密码" autocomplete="off" class="layui-input" readonly="readonly" onblur="passwordSame2()">
            </div>
          </div>

          <span id="oldUpasswordSpan" style="color: red" hidden>原密码错误</span>
          <span id="upasswordSpan" style="color: red" hidden>两次输入的密码不同</span>

          <div class="layui-form-item">
            <div class="layui-input-block">
              <div class="layui-footer" style="left: 0;">
                <button type="button" class="layui-btn layui-btn-primary" onclick="updateUpassword()">确认修改</button>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>

      <script>
        $(function  () {
          layui.use('form', function(){
            var form = layui.form;
            // layer.msg('玩命卖萌中', function(){
            //   //关闭后的操作
            //   });
            //监听提交
            form.on('submit(updateUpassword)', function(data){

                var uid = $("#uid").val();
                var upassword = $("#upassword").val();
                var password2 = $("#reNewUpassword").val();
                var utipe = $("#utipe").val();
                if (upassword == password2){
                  layer.msg("新密码不能和原密码相同");
                } else {
                  $.ajax({
                    type: "post",
                    url: "/userUpdate",
                    dataType: "json",
                    data: {'uid':uid,'upassword':password2,'utipe':utipe},
                    success: function (data) {
                      if (data == 0) {
                        //跳转页面
                        window.open("reLogin",'_parent');
                      } else {
                        layer.msg("修改失败");
                      }
                    }
                  });
                }

            });
          });
        })


      </script>


  <script>

    //确认旧密码
    function oldUpasswordReally() {
      var uname = $("#uname").val();
      var upassword = $("#oldUpassword").val();
      $.ajax({
        type:"post",
        url:"/userLogin",
        dataType:"json",
        data:{uname:uname,upassword:upassword},
        success:function (data) {
          if (data == 0){
            $("#oldUpasswordIf").attr("value",1);
            $("#oldUpasswordSpan").show();
            $("#newUpassword").attr("readonly","readonly");
            $("#reNewUpassword").attr("readonly","readonly");
          }else {
            $("#oldUpasswordIf").attr("value",0);
            $("#oldUpasswordSpan").hide();
            $("#newUpassword").removeAttr("readonly");
            $("#reNewUpassword").removeAttr("readonly");
          }
        }
      });
    }

    //判断两次输入的密码是否相同1
    function passwordSame1() {
      var password1 = $("#newUpassword").val();
      var password2 = $("#reNewUpassword").val();
      if (password1 != '' && password2 != ''){
        if (password1 != password2){
          $("#upasswordSpan").show();
          $("#newUpasswordIf").attr("value",1);
        }else {
          $("#upasswordSpan").hide();
          $("#newUpasswordIf").attr("value",0);
          $("#reNewUpasswordIf").attr("value",0);
        }
      }
    }

    //判断两次输入的密码是否相同2
    function passwordSame2() {
      var password1 = $("#newUpassword").val();
      var password2 = $("#reNewUpassword").val();
      if (password1 != '' && password2 != '') {
        if (password1 != password2) {
          $("#upasswordSpan").show();
          $("#reNewUpasswordIf").attr("value", 1);
        } else {
          $("#upasswordSpan").hide();
          $("#newUpasswordIf").attr("value", 0);
          $("#reNewUpasswordIf").attr("value", 0);
        }
      }
    }

    //
    function updateUpassword() {
      var newUpasswordIf = $("#newUpasswordIf").val();
      var reNewUpasswordIf = $("#reNewUpasswordIf").val();
      var oldUpasswordIf = $("#oldUpasswordIf").val();
      if (newUpasswordIf == 0 && reNewUpasswordIf == 0 &&oldUpasswordIf == 0){
        var uid = $("#uid").val();
        var upassword = $("#upassword").val();
        var password2 = $("#reNewUpassword").val();
        var utipe = $("#utipe").val();
        if (upassword == password2){
          layer.msg("新密码不能和原密码相同");
        } else {
          $.ajax({
            type: "post",
            url: "/userUpdate",
            dataType: "json",
            data: {'uid':uid,'upassword':password2,'utipe':utipe},
            success: function (data) {
              if (data == 0) {
                //跳转页面
                alert("修改成功，请重新登录");
                window.open("reLogin",'_parent');
              } else {
                layer.msg("修改失败");
              }
            }
          });
        }
      }
    }

  </script>
    
  <script>
  layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'laydate'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,element = layui.element
    ,layer = layui.layer
    ,laydate = layui.laydate
    ,form = layui.form;
    
    form.render(null, 'component-form-group');

    laydate.render({
      elem: '#LAY-component-form-group-date'
    });
    
    /* 自定义验证规则 */
    form.verify({
      title: function(value){
        if(value.length < 5){
          return '标题至少得5个字符啊';
        }
      }
      ,pass: [/(.+){3,12}$/, '密码必须3到12位']
      ,content: function(value){
        layedit.sync(editIndex);
      }
    });
    
    /* 监听指定开关 */
    form.on('switch(component-form-switchTest)', function(data){
      layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
        offset: '6px'
      });
      layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
    });
    
    /* 监听提交 */
    form.on('submit(component-form-demo1)', function(data){
      parent.layer.alert(JSON.stringify(data.field), {
        title: '最终的提交信息'
      })
      return false;
    });
  });
  </script>


<style id="LAY_layadmin_theme">.layui-side-menu,.layadmin-pagetabs .layui-tab-title li:after,.layadmin-pagetabs .layui-tab-title li.layui-this:after,.layui-layer-admin .layui-layer-title,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child{background-color:#20222A !important;}.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a{background-color:#009688 !important;}.layui-layout-admin .layui-logo{background-color:#20222A !important;}
</style>
</body>

</html>